@charset "utf-8";
@import "bootstrap/jquery.mobile.transition.pop";
@import "bootstrap/jquery.mobile.transition.slideup";
@include keyframes(anim-group-roate){
  0%{
    -webkit-transform:scale(0.5) rotate(720deg);
    -moz-transform:scale(0.5) rotate(720deg);
    transform:scale(0.5) rotate(720deg);
    opacity: 0;
   // @include rotate(0deg);
    // @include scale(0.5);
  }
  100%{
    -webkit-transform:scale(1) rotate(0deg);
    -moz-transform:scale(1) rotate(0deg);
    transform:scale(1) rotate(0deg);
    opacity: 1;
    //@include rotate(1080deg);
    //@include scale(1);
  }
}
@include keyframes(anim-hand){
  0%{
    @include scale(1);
    display: block;
  }
  100%{
    @include scale(1.5);
  }
}

@include keyframes(anim-pop){
  0%{
    @include scale(0);
    opacity: 0;
    display: block;
  }
  30%{
    @include scale(1.5);
    opacity: 1;
    display: block;
  }
  60%{
    @include scale(0.5);
    opacity: 0.8;
  }
  100%{
    @include scale(1);
    display: block;
    opacity: 1;
  }
}
@include keyframes(anim-flower){
  0%{
    -webkit-transform:scale(0) rotate(-90deg);
    -moz-transform:scale(0) rotate(-90deg);
    transform:scale(0) rotate(-90deg);
    opacity: 0;
  }
  100%{
    -webkit-transform:scale(1) rotate(0deg);
    -moz-transform:scale(1) rotate(0deg);
    transform:scale(1) rotate(0deg);
    opacity: 1;
  }
}
@include keyframes(anim-plane){
  0%{
    bottom:20%;
    @include scale(1);
    opacity: 1;
  }
  100%{
    opacity: 0;
    @include scale(3);
    bottom:120%;
  }
}
@include keyframes(anim-road){
  0%{
    bottom:0;
  }
  100%{
    opacity: 0;
    bottom:-100%;
  }
}

@-moz-keyframes startup {
  0%, 30% {
    opacity: 0;
    -moz-transform: translate(0, 10px);
  }
  60% {
    opacity: 1;
    -moz-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -moz-transform: translate(0, -5px);
  }
}
@-webkit-keyframes startup {
  0%, 30% {
    opacity: 0;
    -webkit-transform: translate(0, 10px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -5px);
  }
}
@keyframes startup {
  0%, 30% {
    opacity: 0;
    transform: translate(0, 10px);
  }
  60% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -5px);
  }
}
@-webkit-keyframes startdown {
  0%, 30% {
    opacity: 0;
    -webkit-transform: translate(0, -10px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 5px);
  }
}
@-moz-keyframes startdown {
  0%, 30% {
    opacity: 0;
    -moz-transform: translate(0, -10px);
  }
  60% {
    opacity: 1;
    -moz-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -moz-transform: translate(0, 5px);
  }
}
@keyframes startdown {
  0%, 30% {
    opacity: 0;
    transform: translate(0, -10px);
  }
  60% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, 5px);
  }
}

@keyframes anim-heart {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@-webkit-keyframes anim-heart {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
  }
}
@-moz-keyframes anim-heart {
  0% {
    opacity: 0.8;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(1.5);
  }
}
/*------------small heart-----------------*/
@keyframes small-anim-heart {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
@-webkit-keyframes small-anim-heart {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
  }
}
@-moz-keyframes small-anim-heart {
  0% {
    opacity: 0.8;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(1.2);
  }
}


@include keyframes(anim_up) {
  0% {
    top: 0px;
  }
  50% {
    top: 20px;
  }
  100% {
    top: 0px;
  }
}
@include keyframes(anim_down) {
  0% {
    bottom: 20px;
  }
  50% {
    bottom: 10px;
  }
  100% {
    bottom: 20px;
  }
}

@keyframes rotateHalf {
  0% {
    transform:translate(-300%,80%) rotate(90deg);
    opacity: 0;
  }
  100% {
    transform:translate(0,0) rotate(0deg);
    opacity: 1;
  }
}
@-moz-keyframes rotateHalf{
  0% {
    -moz-transform:translate(-300%,80%) rotate(90deg);
    opacity: 0;
  }
  100% {
    -moz-transform:translate(0,0) rotate(0deg);
    opacity: 1;
  }
}
@-webkit-keyframes rotateHalf{
  0% {
    -webkit-transform:translate(-300%,80%) rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform:translate(0,0) rotate(0deg);
    opacity: 1;
  }
}

@include keyframes(slideFull){
  0% {
    width:40px;
  }
  100% {
    width:146px;
  }
}


